<template>
    <div class="header01">
        <el-row class="row-bg" justify="center">
            <el-col :span="12">
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>注册</span>
                            <el-button class="button" text  @click="register1()">去登录</el-button>
                        </div>
                    </template>

                    <el-form ref="ruleFormRef" :model="formDate" :rules="rules" label-width="120px" class="demo-ruleForm" status-icon>
                        <el-form-item label="用户名" prop="username">
                            <el-input v-model="formDate.username" />
                        </el-form-item>
                        <el-form-item label="手机号" prop="tel">
                            <el-input v-model="formDate.tel" />
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input v-model="formDate.password" type="password" />
                        </el-form-item>
                        <el-form-item label="确认密码" prop="password2">
                            <el-input v-model="formDate.password2" type="password" />
                        </el-form-item>
                        <el-form-item label="邮箱" prop="email">
                            <el-input v-model="formDate.email" />
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="submitForm(ruleFormRef)">
                                注册
                            </el-button>
                            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { userApi } from '@/api'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { Md5 } from 'ts-md5'
const router=useRouter()
/**
 * 如果你要查找某一个标签，docment.getelementById:原生js中 
 * vue里面查查找标签对象 在里面定义一个ref 来锁定，
 * @click="submitForm(ruleFormRef) 里面的参数就是要查找对应的提交表单的对象
 * 是通过对应的标签里面的ref定义
 */
//做响应式处理，需要定义
const ruleFormRef = ref()

const formDate = reactive({
    username: '生蚝',
    tel: '13721337355',
    password: 'Sh1372133',
    password2: 'Sh1372133',
    email: '1234@qq.com'
})

//正则表达式验证
const rules = reactive({
    tel: [
        { required: true, message: '手机号必填', trigger: 'blur' },
        { pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, message: '手机号格式不正确', trigger: 'blur' },
    ],
     password: [
        { required: true, message: '密码必填', trigger: 'blur' },
        { pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/, message: '必须包含大小写字母和数字的组合，长度在8-10之间', trigger: 'blur' },
    ],
     password2: [
        { required: true, message: '密码必填', trigger: 'blur' },
        { pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/, message: '必须包含大小写字母和数字的组合，长度在8-10之间', trigger: 'blur' },
    ],
     email: [
        { required: true, message: '邮箱必填', trigger: 'blur' },
        {type: 'email', message: '邮箱格式不正确', trigger: 'blur' },
    ],
})

const formSubmit = () => { 
console.log("验证成功，准备向后台提交表单");
// 密码验证
    if (formDate.password != formDate.password2) { 
        ElMessage.error("两次输入的密码不一致，请确认密码")
        return
    }
   
   // console.log(md5Pwd);
    
    let tel = formDate.tel
    let username = formDate.username
    let email =formDate.email
    // let password = formDate.password
     const md5Pwd = Md5.hashStr(formDate.password).toUpperCase(); 
    userApi.register.call({ tel: tel, username,email, password: md5Pwd }).then((res:any) => { 
        console.log(res);
        ElMessage.success("注册成功")
        router.push({name: 'user-login'})
    })

}


const submitForm = async (formEl: any) => {
    if (!formEl) return
    await formEl.validate((valid:any, fields:any) => {
        if (valid) {
            formSubmit()
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: any) => {
    if (!formEl) return
    formEl.resetFields()
}

const register1 =()=>{
    router.push({name:'user-login'})
}
</script>
<style scoped>

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.button{
    color: black;
    /*字体加粗*/
    font-weight: bold;
}
.box-card{
    margin-top: 20%;
    opacity:0.8;
}
.header01{
    height: 100%;
    width: 100%;
    background: url(/image/bg.jpeg);
    position: fixed;
    background-size: 100% 100%;
}
span{
    color: black;
     font-weight: bold;
}
</style>
<style>
.el-form-item__label{
     color: black;
     font-weight: bold;
}
</style>